import React from 'react'

import { HashRouter, Route, Link } from 'react-router-dom'

import { Layout, Menu } from 'antd';

const { Header, Content, Footer } = Layout;

import styles from './css/app.scss'

import Home from './components/Home.jsx'
import Movie from './components/Movie.jsx'
import About from './components/About.jsx'

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    componentWillMount(){

    }
    render() {
        return <HashRouter>
            <Layout className="layout">
                <Header>
                    <div className={styles.logo} />
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={window.location.hash.split("/")[1]}
                        style={{ lineHeight: '64px' }}
                    >
                        <Menu.Item key="home"><Link to="/home">首页</Link></Menu.Item>
                        <Menu.Item key="movie"><Link to="/movie/in_theaters/1">电影</Link></Menu.Item>
                        <Menu.Item key="about"><Link to="/about">关于</Link></Menu.Item>
                    </Menu>
                </Header>
                <Content style={{ padding: '0 50px', height: '100%' ,}}>
                    <div className={styles.content}>
                        <Route path="/home" component={Home}></Route>
                        <Route path="/movie" component={Movie}></Route>
                        <Route path="/about" component={About}></Route>
                    </div>
                </Content>
                <Footer style={{ textAlign: 'center' }}>陌上花开缓缓归 ©2020 Created by Mr Xu</Footer>
            </Layout>
        </HashRouter>
    }
}